import React, { Component } from 'react';
import TodoStore from '../../stores/TodoStore';

function getAppState() {
    return {
        todos: TodoStore.getTodos(),
    };
}

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.state = {
            todos: [],
        };
    }
    componentDidMount() {
        TodoStore.addChangeListener(this.onChange);
    }
    onChange() {
        this.setState(getAppState());
    }
    render() {
        return (
            <div>
                <h4>TODOLIST</h4>
                <ul>
                    {
                        this.state.todos.map((todo, key) => (
                            <li key = {key}>{todo}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default TodoList;
